
      .figure.img-center img {
        width: 100%;
        display: block;
        margin: auto;
      }

      body h1 {
        text-align: center !important;
        font-size: 32px ;
      }
      body h2{
        margin-top:20px;
      }
      .register-area-form .register-form{
        background:none !important;
      }
      .register-area-form .register-form .login-footer2 {
          /* padding: 0; */
          padding: 20px 0 30px 0 !important;
          text-align: center;
          font-size: 18px;
          border-bottom:#65021238 solid 1px;
      }
      .howto-heading{
        display:flex;
        border-bottom: #B50623 solid 1px;
      }
      .howto-heading h2, .howto-heading p{
        flex-flow: row;
      }
      .howto-heading h2{
        flex: 20%;
        color: #B50623;
        /* border: #650212 solid 1px; */
        border-radius: 20px;
        text-align: center;
        background: #fff;
        padding: 15px 0;
      }

      .howto-active h2{
        flex: 20%;
        color: #0c1d32;
        border: #0c1d32 solid 1px;
        border-radius: 10px;
        text-align: center;
        background: #4095fd29;
        padding: 15px 0;
      }

      .howto-heading p{
        flex: 80%;
        line-height: normal !important;
        align-self: center;
        padding: 3px 20px;
        margin-bottom: 0px !important;
      }
      .howto-main{
        margin-top:30px;
      }
      .howto-main .row:nth-child(2){
        border:red solid 1px;
      }
      .howto-main .col-md-4{
        padding: 0 20px 5px 20px;
      }
      .howto-main .step1-text p{
        line-height: 1.8em !important;
        margin-bottom: 20px;
      }

      .step1-text .list-group{
        border: #ffffff solid 1px;
        margin-bottom: 30px;
        font-size: 16px;
      }
      .step1-text .list-group li {
        padding: 15px 0;
        margin-left: 30px;
      }
      .step1-text .list-group .active {
        padding: 10px 20px;
        margin-left: 0px !important;
        text-align: center;
        background:#0c1d32 !important;
        color:#fff !important;
      }

      .howto-main .step2-text p{
        
        line-height: 1.8em !important;
        margin: 20px;
      }
      
      .howto-main .step2-cta, .howto-mobile .step2-cta {
        width: 100%;
        text-align: center;
        color:#fff !important;
        margin-top:50px;
        margin-bottom:40px
      }


      .howto-main .step2-cta a, .howto-mobile .step2-cta a{
        /* background: #650212 !important; */
        background: #650212 !important;
        padding: 20px 30px;
        color: #fff;
        border-radius: 5px;
      }


      .howto-mobile .step2-cta a {
        padding: 20px;
      }
      /* .howto-active .step2-cta a{
        background: #650212 !important;
        padding: 20px 30px;
        color: #fff;
        border-radius: 5px;
      } */

      .howto-main .step3-text p{
        
        line-height: 1.8em !important;
        margin: 20px;
      }
      .howto-main .step3-text legend{
        margin-bottom: 0px !important;
        border:none !important;
      }
      .howto-main .step3-text .card{
        border:transparent;
        margin-bottom: 20px;
      }
      .howto-main .step3-text .card ul li{
        font-size: 16px;
      }

      .step2-text, .step3-text{
        opacity: .5;
      }

      .howto-active{
        cursor: pointer;
        background:#6502120f;
        border:#650212 solid 1px;
        border-radius: 20px;
        margin-top:50px;
        height:max-content;
        padding-top: 0px !important;

      }

       .opacity-50 {
          opacity: 0.5;
      }

     .hover-inactive {
        border: 1px solid transparent;
        border-radius: 20px;
        background: none;
        
      }
   

     .hover-active {
        border:#650212 solid 1px !important;
        border-radius: 20px !important;
      }


      .step-inactive {
        background: none !important;
        color: #B50623 !important;
        border: none !important;
      }

  

      .howto-step:hover .step2-text,
      .howto-step:hover .step3-text
      {
        opacity: 1;
      }
  

      .ms-slide-bgcont{
        border-radius: 10px !important;
      }


      i.fa-solid.fa-star {
        margin-right:5px;
      }


      /***************STEPS MOBILE ACCORDION STYLE***************/


      .panel-title-row  {
      display: flex;
      align-items: center;
      column-gap: 5px;

      }

      .step {
        width: 70px;
    border-radius: 2px;
    font-size: 1.5rem;
    color: #fff;
    text-align: center !important;
    background: #DBE7F5; /*change to your desired bg color*/
    transition: all .5s;
    outline: 2px solid #0C1D32; /*change to your desired border color*/
    color: #0C1D32; /*change to your desired color*/
    padding: 15px 7px;
}

.step-text {
  
    font-size: 15px;
    padding-left: 46px;
    padding-top: 5px;
    color: #2D2E34;  /*change to your desired color*/
    padding-inline: 2px !important;
}

.panel-default {
    border-color: transparent;
}

.panel {
    margin-bottom: 20px;
    background-color: transparent;
    border: 0px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,0.05);
    box-shadow: 0 0px 0px rgba(0,0,0,0.05);
}

.panel-title {
  padding: 10px 8px;
    border-radius: 3px;

}

.panel.panel-default {
  margin-bottom:10px;
}

.panel-default>.panel-heading {
    color: #333;
    background-color: transparent;
    border-color: transparent;
    padding:0;
}

.panel-group .panel-heading+.panel-collapse .panel-body {
    border-top: 0px solid #ddd;
}

.panel-group .panel:not(:last-child) {
  margin-bottom: 10px;
}


/*************START OF STYLE USED WITH JAVASCRIPT**********/

/**to devs incharge-- change the bg-color and color according to your site color palette if you want **/

.howto-mobile-active-heading{
background-color: #0C1D32 !important; 

}


.howto-mobile-active-title {
    color: #DBE7F5 !important;
}




.howto-mobile-active-step {
background: #650212 !important;
    color: #DBE7F5 !important; 
}


.howto-mobile-inactive-step {
    color: #650212 !important;
    
    outline: 2px solid transparent !important;
    background: transparent !important;
}



.howto-active-mobile { 
    outline: 1px solid #650212;
    background-color: #FAF7F3 !important;
}


/*************END OF  STYLE USED WITH JAVASCRIPT**********/


/************END OF  STEP MOBILE ACCORDION STYLE***************/

      
/************START OF MEDIA QUERIES*****************/

         @media screen and (max-width: 992px) {

          h1 {
            font-size: 2rem !important;
          }

        .howto-main {
          display: none;
        }

        .howto-mobile .list-group {
          width: 100%;
        }

    

        .step2-text, .step3-text {
            opacity: 1;
        }


        .howto-mobile {
    margin-top: 35px;
    }

        .howto-mobile .card {
          margin-bottom:22px;
        }

      }



      @media screen and (min-width: 993px) {
        .howto-mobile {
          display: none;
        }

        label.col-lg-3.control-label {
          width: 10%;
        }
      }

   


/************END OF  START OF MEDIA QUERIES*****************/



